import { memo, useEffect } from 'react';
import type { FC, PropsWithChildren } from 'react';
import {useNavigate, useSearchParams} from 'react-router-dom';
import { Badge, Button, Empty, Result, Spin } from 'antd';
import { resAlipayStatus } from '@/services/alipay';
import { useRequest } from 'ahooks';

const OrdersResult: FC<PropsWithChildren<{}>> = () => {
  const [searchParams] = useSearchParams();
  const { data, loading, run } = useRequest(resAlipayStatus, {
    manual: true,
  });
  let order_no;
  useEffect(() => {
    order_no = searchParams.has('order_no') && searchParams.get('order_no');
    if (order_no) {
      run(order_no as string);
    }
  }, [searchParams]);

  const navigate = useNavigate()

  useEffect(() => {
    console.log(data)
  },[data])

  return (
    <div className={'my-12 py-28 shadow-lg w-[1200px] m-auto flex-justify-items-center rounded-3xl bg-white'}>
      <Spin size={'large'} spinning={loading} />
      {data && data.orders.length > 0 && (
        <Result
          status={'success'}
          title={'您已成功付款'}
          subTitle={
            <div className={'space-y-1 my-2'}>
              <div>
                <Badge status={'success'} />
                实付款：
                <span className={'text-xl  text-red-500 font-bold'}>
                  <em className={'text-sm'}>￥</em>
                  {data.status.total_amount}
                </span>
              </div>
              <div>
                <Badge status={'success'} />
                收货人：
                {[
                  data.orders[0].address.name,
                  ' ',
                  data.orders[0].address.phone.slice(3),
                ]}
              </div>
              <div>
                <Badge status={'success'} />
                收货地址：
                {[
                  data.orders[0].address.province,
                  data.orders[0].address.city,
                  data.orders[0].address.county,
                  data.orders[0].address.address,
                ]}
              </div>
            </div>
          }
          extra={
            <div className={'flex items-center justify-between'}>
              <Button type={'link'} onClick={() => {
                navigate("/profile/my_orders")
              }}>查看已买到的商品</Button>
              <Button type={'link'} onClick={() => {
                navigate("/orders_detail/"+data.orders[0].id)
              }}>查看交易详情</Button>
            </div>
          }
        />
      )}
      {!loading && !data || data?.orders.length === 0 && <Empty />}
    </div>
  );
};

export default memo(OrdersResult);
